<style>
canvas {
  border: 1px solid #ccc;
}
</style>
<template>
  <div>
    <button @click="addTextBox">addTextBox</button>
    <button @click="clear">Clear</button>
    <canvas id="c"></canvas>
  </div>
</template>
<script setup lang="ts">
import * as fabric from 'fabric';
import { onMounted, shallowRef, ref } from 'vue';

// 当前画布
const curentCanvas = shallowRef<fabric.Canvas>();

// 当前选中的文本框
const selectedTextbox = shallowRef<fabric.Object>();

// 键盘每次移动的步长
const keydownStep = ref(1);

// 组件挂载完成
onMounted(() => {
  initializeKeydown();

  const canvas = new fabric.Canvas('c', {
    width: 1400,
    height: 800,
    backgroundColor: '#fafafa',
    hoverCursor: 'pointer',
    renderOnAddRemove: true
  });

  // textbox.on('mousedown', function () {
  //   // 鼠标按下时的样式
  //   textbox.set({
  //     strokeWidth: 2,
  //     stroke: 'red'
  //   })
  //   canvas.renderAll()
  // })

  // textbox.on('mouseup', function () {
  //   // 鼠标松开时的样式
  //   textbox.set({
  //     strokeWidth: 1,
  //     stroke: 'black'
  //   })
  //   canvas.renderAll()
  // })

  // 选中时的样式
  // textbox.on('selected', function (options: { target: fabric.Object; e: MouseEvent | TouchEvent }) {
  //   selectedTextbox.value = options.target
  // })

  // 取消选中时的样式
  // textbox.on('deselected', function () {
  //   textbox.set({
  //     strokeWidth: 1,
  //     stroke: 'black'
  //   })
  //   canvas.renderAll()
  // })

  // textbox.on('editing:entered', function (options) {
  //   // 编辑模式下的样式
  //   textbox.set({ strokeWidth: 2, stroke: 'red' })
  //   canvas.renderAll()
  // })

  // textbox.on('editing:exited', function (options) {
  //   // 非编辑模式下的样式
  //   textbox.set({
  //     strokeWidth: 1,
  //     stroke: 'black',
  //     borderColor: 'black', // 设置边框颜色
  //     borderWidth: 1 // 设置边框宽度
  //   })
  //   canvas.renderAll()
  // })

  curentCanvas.value = canvas;
});

// 初始化键盘事件
const initializeKeydown = () => {
  document.addEventListener('keydown', function (event) {
    if (!selectedTextbox.value || !curentCanvas.value) {
      return;
    }
    // 获取按键的 keyCode
    const keyCode = event.key;
    const step = keydownStep.value; // 移动的步长

    // 判断按下的是否是上下左右键
    switch (keyCode) {
      case 'ArrowLeft': // 左键
        selectedTextbox.value.set({ left: selectedTextbox.value.left - step });
        break;
      case 'ArrowUp': // 上键
        selectedTextbox.value.set({ top: selectedTextbox.value.top - step });
        break;
      case 'ArrowRight': // 右键
        selectedTextbox.value.set({ left: selectedTextbox.value.left + step });
        break;
      case 'ArrowDown': // 下键
        selectedTextbox.value.set({ top: selectedTextbox.value.top + step });
        break;
      case 'Delete': // 删除键
        curentCanvas.value.remove(selectedTextbox.value);
        break;
      default:
        return; // 如果不是这四个键，不做任何处理
    }
    // 重新渲染
    curentCanvas.value.renderAll();
    // 阻止默认行为，比如页面滚动，这取决于你的需求，可选
    event.preventDefault();
  });
};

const clear = () => {
  if (curentCanvas.value) {
    curentCanvas.value.clear();
  }
};

const addTextBox = () => {
  if (!curentCanvas.value) {
    return;
  }

  var textbox = new fabric.Textbox('Text Here', {
    left: 100,
    top: 100,
    width: 200,
    height: 30,
    fontSize: 16,
    textAlign: 'center',
    // 设置 Textbox 的背景颜色
    backgroundColor: '#ffcccc'
  });

  textbox.on('selected', function (options: { target: fabric.Object; e: MouseEvent | TouchEvent }) {
    selectedTextbox.value = options.target;
  });

  // 添加到画布
  curentCanvas.value.add(textbox);

  curentCanvas.value.renderAll();
};
</script>
